<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室测试2</title>
    <link rel="stylesheet" href="/static/css/wxroom.css" >
    
</head>
<body>
<div class="container">
    <div class="content" id="chat-log">
        <div class="item item-center"><span>昨天 12:35</span></div>
        <div class="item item-center"><span>聊天室已创建，现在可以开始聊天了。</span></div>

        {% for msg in msgs %}
            {% if not msg.image %}
                <!-- 如果是文本消息，则显示文本内容 -->
                <div class="item item-center"><span>{{ msg.create_time }}</span></div>
                <div class="item item-left">
                    <div class="avatar"><img src="{{ nginx_static_files }}/static/img/girl.jpg"/></div>
                    <div class="bubble bubble-left">{{ msg.content }}<br/></div>
                </div>
            {% else %}
                <!-- 如果是图片消息，则显示图片 -->
                <div class="item item-left">
                    <div class="avatar"><img src="{{ nginx_static_files }}/static/img/girl.jpg"/></div>
                    <img src="{{ nginx_static_files }}{{ msg.image.url }}"
                         alt="{{ msg.username }}发送的图片" height="200px" width="300px">
                </div>

            {% endif %}
        {% endfor %}
    </div>

    <div class="input-area" style="height:200px;overflow:auto">
        <textarea name="text" id="textarea">

        </textarea>
        <div class="button-area">
            <button id="send-btn" onclick="send()">发 送</button>
        </div>

        <div class="button-area">
            <label for="imageInput">选择图片</label>
            <input type="file" id="imageInput" name="avatar" accept="image/png, image/jpeg"/>
            <button id="sendButton">发送图片</button>
        </div>

    </div>
</div>

<script src="http://47.113.186.186/static/js/wxroom.js" ></script>

</body>
</html>